<template>
  <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" width="650px" append-to-body>
    <el-steps
      v-loading="loading"
      direction="vertical"
      finish-status="success"
      :process-status="stepsStatus"
      :active="active"
    >
      <div>
        <el-step v-for="item in auditData">
          <template slot="title">
            <div class="stepsTitle">
              <span
                >{{ item.type === 1 ? '发起申请' : '审批人' }}
                {{ actionType[item.actionType] ? `(${actionType[item.actionType]})` : '' }}</span
              >
            </div>
            <div class="stepsList">
              <div class="item" v-for="step in item.approverList">
                <div class="info">
                  <div class="avatar">
                    <el-avatar
                      shape="square"
                      style="width: 40px; height: 40px; margin-right: 5px; border-radius: 8px"
                      size="large"
                      flt="fill"
                      :src="step.avatar ? step.avatar : `${previewImgUrl}${defaultAvatar}`"
                    ></el-avatar>
                    <span
                      v-if="step.result === 2"
                      class="status"
                      style="
                        width: 16px;
                        height: 16px;
                        border-radius: 50%;
                        border: 2px solid #67c23a;
                        background: #67c23a;
                        font-size: 14px;
                        color: #fff;
                      "
                      ><icon class="el-icon-check"></icon
                    ></span>
                    <span
                      style="
                        width: 16px;
                        height: 16px;
                        border-radius: 50%;
                        border: 2px solid #f56c6c;
                        background: #f56c6c;
                        font-size: 14px;
                        color: #fff;
                      "
                      v-if="step.result === 3"
                      class="status"
                      ><icon class="el-icon-close"></icon
                    ></span>
                  </div>
                  <span
                    :style="`color:${step.result == 0 ? '#C0C4CC' : ''}${step.result == 1 ? '#303133' : ''}${
                      step.result === 2 ? '#54cc90' : ''
                    }${step.result > 2 ? '#f65c6c' : ''};`"
                    >{{ step.userName }}</span
                  >
                  <!-- {{ actionType[item.actionType] ? `(${actionType[item.actionType]})` : '' }} -->
                  <!-- {{ auditStatus[item.result] ? auditStatus[item.result] :  }} -->
                  <span style="color: rgba(48, 49, 51, 0.5); margin-left: auto">{{ step.optTime || ' ' }}</span>
                </div>
              </div>
            </div>
          </template>
        </el-step>
      </div>
      <el-empty v-if="auditData.length === 0 && isInit == false" description="暂无相关数据"></el-empty>
    </el-steps>
  </el-dialog>
</template>
<script>
import { approvalProcess } from '@/api/biz/contract'

export default {
  name: 'AuditProgress',
  components: {},
  data() {
    return {
      open: false,
      title: '查看审核进度',
      // 遮罩层
      loading: false,
      // 表单参数
      auditData: [],
      active: '2',
      auditStatus: {
        0: {
          text: '待审批',
          status: 'wait',
        },
        1: {
          text: '审批中',
          status: 'process',
        },
        2: {
          text: '同意',
          status: 'finish',
        },
        3: {
          text: '拒绝',
          status: 'error',
        },
        4: {
          text: '审批终止（发起人撤销审批单）',
          status: 'error',
        },
      },
      actionType: {
        AND: '会签',
        OR: '或签',
        NONE: '单人',
      },
      active: 0,
      isInit: true,
      stepsStatus: '',
      defaultAvatar: '',
      previewImgUrl: this.$imagePreviewUrl,
    }
  },
  watch: {
    open: {
      handler(val) {
        if (!val) {
          this.$nextTick(() => {
            this.auditData = []
            this.isInit = true
            this.stepsStatus = ''
          })
        }
      },
    },
  },
  created() {
    this.getConfigKey('sys.default.image').then((response) => {
      const data = JSON.parse(response.data)
      this.defaultAvatar = data.appCustomerIcon
    })
  },
  methods: {
    init(id) {
      this.isInit = false
      this.open = true
      this.loading = true
      approvalProcess(id)
        .then((res) => {
          let active = -1
          let stepsStatus = ''
          for (let i = 0; i < res.data.length; i++) {
            const item = res.data[i]
            if (item.result > 2) {
              stepsStatus = 'error'
              active = i
              break
            } else if (item.result === 1 && i <= res.data.length - 1) {
              stepsStatus = 'process'
              active = i
              break
            } else if (item.result === 2 && i === res.data.length - 1) {
              stepsStatus = 'success'
              active = i + 1
              break
            }
          }
          console.log(active)
          this.active = active
          this.stepsStatus = stepsStatus
          this.auditData = res.data
          this.loading = false
        })
        .catch((error) => {
          this.loading = false
        })
    },
  },
}
</script>
<style lang="scss">
.el-step__title {
  font-size: 15px;
}

.el-steps--vertical {
  max-height: calc(88vh - 210px) !important;
}
.el-step {
  flex-basis: initial !important;
  min-height: 75px;
}

.stepsList {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
}
.stepsList > .item {
  display: flex;
  flex-direction: column;

  margin-bottom: 8px;
}
.stepsList > .item:last-child {
  margin-bottom: 0px;
}
.stepsList > .item > .info {
  display: flex;
  flex-direction: row;
  align-items: center;
  .avatar {
    position: relative;
    > .status {
      position: absolute;
      right: -1px;
      bottom: 4px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }
  }
}
.el-step:nth-last-child(1) .el-step__line {
  background: none !important;
}
</style>
